<template>
  <div class="main-box">
    <el-drawer
      :visible.sync="isDrawer"
      :direction="direction"
      :size="this.$store.state.user.userIsPhone ? '90%' : '30%'"
    >
      <template slot="title">
        <div class="drawer-title">项目详情</div>
      </template>
      <div class="table-pro-info-box">
        <div class="title">
          <i class="iconfont icon-jibenxinxi"></i>基本信息
        </div>
        <div class="info-box">
          <div class="pro-name">
            项目名称：<span>{{ proName }}</span>
          </div>
          <div class="fun-space">
            <div class="space-title">功能范围：</div>
            <div class="fun-box">
              {{ projectData.info ? projectData.info : "无功能" }}
            </div>
          </div>
        </div>
      </div>
      <div class="table-contract-info-box">
        <div class="title">
          <i class="iconfont icon-hetongxinxi"></i>合同信息
        </div>
        <div class="contract-box">
          <div class="contract-info">
            <div>
              签订人{{
                projectData.contract
                  ? projectData.contract.contractname
                  : "某某某"
              }}于{{
                projectData.contract
                  ? projectData.contract.signtime
                  : "XXX年YY月XX日"
              }}签订合同，金额为：10000000元。
            </div>
            <div>
              该合同已汇款{{
                projectData.contract
                  ? projectData.contract.contractmoney
                  : "XXX年YY月XX日"
              }}元，预计于{{
                projectData.contract
                  ? projectData.contract.nextbackdate
                  : "XXX年YY月XX日"
              }}回款
            </div>
          </div>
        </div>
      </div>
      <div class="table-team-info-box">
        <div class="title" style="display: flex">
          <i class="iconfont icon-chengyuanxinxi"></i>成员信息
          <div class="day-choose">
            <el-date-picker
              size="mini"
              ref="dayChoose"
              v-model="dayData"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              @change="dayDataChange"
            >
            </el-date-picker>
          </div>
        </div>
        <div v-show="active === 0" class="team-box">
          <div class="title-box">
            <div>在岗人员</div>
            <div>项目负责人</div>
          </div>
          <div class="info-box">
            <div>
              ：{{
                projectData.dutyTeam !== "、、、、"
                  ? projectData.dutyTeam
                  : "无"
              }}
            </div>
            <div>
              ：{{ projectData.team !== "、、" ? projectData.team : "无" }}
            </div>
          </div>
        </div>
      </div>
      <div class="table-milestone-info-box">
        <div class="title">
          <i class="iconfont icon-lichengbeixinxi"></i>里程碑信息
        </div>
        <div class="milestone-box">
          <div
            class="milestone-item"
            v-for="(item, index) in projectData.milestoneData"
            :key="index"
          >
            <div class="milestone-name">
              {{ item.stageName }}
            </div>
            <div class="milestone-time">
              {{ item.stageTime }}
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getProjectInfoApi,
  getProjectContractApi,
  getProjectTeamApi,
  getProjectMilestonesApi,
  getProjectDutyApi,
} from "@/api/index";
export default {
  props: {
    drawer: {
      type: Boolean,
      default: false,
    },
    projectRow: {
      type: Object,
      default: false,
    },
  },
  data() {
    return {
      // 是否弹出抽屉
      isDrawer: false,
      // 抽屉弹出方向
      direction: "rtl",
      // 项目名称
      proName: "",
      // 基本信息高亮与否
      tageObj: {
        盘煤仪: false,
        无人值守: false,
        数字化料场: false,
        气体检测: false,
        红外检测: false,
      },
      // 控制团队高亮或在岗高亮
      active: 0,
      // 选取的日期
      dayData: new Date(),
      // 展示的日期
      dayArr: [],
      // 折叠栏
      activeName: "1",
      // 项目信息
      projectData: {
        info: null,
        contract: null,
        team: null,
        dutyTeam: null,
        milestone: {
          SalesResearch: [],
          ElectricImplement: [],
          Design: [],
          Develop: [],
          DebugTogethe: [],
          Waiting4Sign: [],
          Finish: [],
        },
      },
    };
  },

  mounted() {
    this.initDay();
  },

  methods: {
    openDrawer(row) {
      let data = {
        procode: row.procode,
      };
      // 基本信息
      this.getProjectInfo(data);
      // 合同信息
      this.getProjectContract(data);
      // 管理员信息
      this.getDefautTeam(data);
      // 在岗成员
      this.getDutyTeam(data);
      // 里程碑信息
      this.getProjectMilestones(row.procode);
      this.proName = row.proshortname;
      this.isDrawer = true;
    },

    // 获取当前项目的基本情况
    async getProjectInfo(data) {
      let infoRes = await getProjectInfoApi(data);
      let str = "";
      if (infoRes.length) {
        infoRes.forEach((item, index) => {
          let str1 = index === infoRes.length - 1 ? "" : "、";
          str = str + item.fuctionname + str1;
        });
      }
      this.projectData.info = str;
    },

    // 获取当前项目的合同信息
    async getProjectContract(data) {
      let contractRes = await getProjectContractApi(data);
      if (contractRes.length) {
        this.projectData.contract = contractRes[0];
        this.projectData.contract.signtime = this.fixTime(
          contractRes[0].signtime
        );
        this.projectData.contract.nextbackdate = this.fixTime(
          contractRes[0].nextbackdate
        );
      } else {
        this.projectData.contract = [];
      }
    },

    // 获取默认在岗人员
    async getDefautTeam(data) {
      let res = await getProjectTeamApi(data);
      let arrDefault = res.split("\n");
      arrDefault.pop();
      this.projectData.team = this.fixTeamName(arrDefault);
    },

    // 获取当日在岗人员
    async getDutyTeam(data) {
      data.dutydate =
        this.dayArr[0] + "-" + this.dayArr[1] + "-" + this.dayArr[2];
      let res = await getProjectDutyApi(data);
      let arr = res.split("\n");
      this.projectData.dutyTeam = this.fixTeamName(arr);
    },

    // 打开日期选择器
    openDayChoose() {
      this.$refs.dayChoose.handleClickIcon();
    },

    // 选择的日期变化
    dayDataChange(day) {
      let data = {
        procode: this.projectRow.procode,
      };
      this.dayArr = day.split("-");
      this.getDutyTeam(data);
    },

    // 处理成员名称信息
    fixTeamName(arr) {
      let str = "";
      arr.forEach((item, index) => {
        let arr = item.split(":");
        let str1 = index === arr.length ? "" : "、";
        str = str + arr[1] + str1;
      });
      return str;
    },

    // 获取当前项目的里程碑信息
    async getProjectMilestones(code) {
      let data = {
        procode: code,
      };
      let milestoneRes = await getProjectMilestonesApi(data);
      this.projectData.milestone = this.finxMilestoneRes(milestoneRes);
    },

    // 清洗里程碑数据
    finxMilestoneRes(arr) {
      let obj = {
        SalesResearch: [],
        ElectricImplement: [],
        Design: [],
        Develop: [],
        DebugTogethe: [],
        Waiting4Sign: [],
        Finish: [],
      };
      if (arr.length) {
        arr.forEach((item) => {
          item.milestonetime =
            item.milestonetime.split(" ")[0].split("/")[2] +
            "-" +
            item.milestonetime.split(" ")[0].split("/")[0] +
            "-" +
            item.milestonetime.split(" ")[0].split("/")[1];
          switch (item.prostage) {
            case "SalesResearch":
              obj.SalesResearch.push(item);
              break;
            case "ElectricImplement":
              obj.ElectricImplement.push(item);
              break;
            case "Design":
              obj.Design.push(item);
              break;
            case "Develop":
              obj.Develop.push(item);
              break;
            case "DebugTogethe":
              obj.DebugTogethe.push(item);
              break;
            case "Waiting4Sign":
              obj.Waiting4Sign.push(item);
              break;
            case "Waiting5Sign":
              obj.Waiting4Sign.push(item);
              break;
            case "Finish":
              obj.Finish.push(item);
              break;
          }
        });
      }
      return obj;
    },

    // 打开日期选择器
    openDayChoose() {
      this.$refs.dayChoose.handleClickIcon();
    },

    // 初始化当前日期
    initDay() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      if (year < 10) {
        year = "0" + year;
      }
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      this.dayArr = [year, month, day];
    },

    // 处理时间
    fixTime(str) {
      let arr = str.split("-");
      let str1 = arr[2].slice(0, 2);
      return arr[0] + "-" + arr[1] + "-" + str1;
    },
  },
};
</script>

<style lang="scss" >
.drawer-title {
  font-size: 16px;
}
.title {
  /* border-top: 2px solid #f0f0f0; */
  height: 36px;
  font-size: 16px;
  font-weight: bold;
  line-height: 36px;
  padding-left: 10px;

  .el-date-picker {
    width: 40px;
  }

  .day-choose {
    width: 100px;
    /* border: 1px solid red; */
    margin-left: 53%;

    .el-input__inner {
      width: 100px;
      padding-right: 0;
    }
  }

  > i {
    margin-right: 5px;
    /* border: 1px solid red; */
  }
}
.table-pro-info-box {
  /* border-bottom: 1px solid #f0f0f0; */

  .info-box {
    border-top: 1px solid #f0f0f0;
    padding-top: 5px;
    margin-bottom: 5px;

    .pro-name {
      padding-left: 20px;
      font-size: 14px;

      > span {
        padding-left: 0px;
      }
    }

    .fun-space {
      /* border: 1px solid red; */
      display: flex;
      margin-top: 4px;

      .space-title {
        /* border: 1px solid green; */
        /* padding-top: 8px; */
        padding-left: 20px;
        font-size: 14px;
        height: 18px;
        line-height: 20px;
      }

      .fun-box {
        /* border: 1px solid blue; */
        font-size: 14px;
        height: 18px;
        line-height: 20px;
        width: 75%;
      }

      .el-tag {
        width: 30%;
        height: 22px;
        font-size: 14px;
        line-height: 20px;
        text-align: center;
        margin: 5px 5px;
      }
    }
  }
  .title-box {
    border-top: 1px solid #f0f0f0;
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
  }
}

.table-contract-info-box {
  height: 110px;
  .contract-box {
    /* border: 1px solid red; */
    /* padding-left: 20px; */
    display: flex;

    .contract-info {
      /* border: 1px solid red; */
      border-top: 1px solid #f0f0f0;
      height: 20px;
      line-height: 20px;
      padding-top: 5px;
      margin-bottom: 5px;
      padding-left: 20px;
      > div {
        /* border: 1px solid green; */
        width: 90%;
        font-size: 14px;
        margin-bottom: 4px;
      }
    }

    .title-box {
      width: 22%;

      > div {
        height: 32px;
        font-size: 14px;

        text-align: justify;
        line-height: 32px;
      }

      > div:after {
        content: "";
        width: 100%;
        display: inline-block;
        height: 0;
      }
    }

    .info-box {
      /* border: 1px solid green; */
      border-top: 1px solid #f0f0f0;
      width: 59%;

      > div {
        height: 32px;
        font-size: 14px;
        font-weight: 500;
        color: black;
        text-align: start;
        line-height: 32px;
      }
    }
  }

  .info-box {
    width: 59%;

    > div {
      height: 32px;
      font-size: 14px;
      font-weight: 500;
      color: black;
      text-align: start;
      line-height: 32px;
    }
  }
}

.table-team-info-box {
  /* border: 1px solid red; */

  .team-box {
    border-top: 1px solid #f0f0f0;
    padding-left: 20px;
    display: flex;

    .title-box {
      width: 18%;

      > div {
        height: 20px;
        font-size: 14px;
        text-align: justify;
        line-height: 32px;
      }

      > div:after {
        content: "";
        width: 100%;
        display: inline-block;
        height: 0;
      }
    }

    .info-box {
      width: 74%;

      > div {
        height: 20px;
        font-size: 14px;
        font-weight: 500;
        color: black;
        text-align: start;
        line-height: 32px;
      }
    }
    .info-box:last-child {
      margin-bottom: 15px;
    }
  }
}

.table-milestone-info-box {
  .milestone-box {
    /* border: 1px solid red; */
    width: 90%;
    padding-left: 20px;
    display: flex;

    .el-collapse-item {
      width: 400px;

      .collapse-box {
        display: flex;
        margin-left: 25px;
      }
    }

    .title-box {
      /* border: 1px solid blue; */
      width: 25%;

      > div {
        /* border: 1px solid green; */
        height: 32px;
        font-size: 14px;
        text-align: justify;
        line-height: 32px;
      }

      > div:after {
        content: "";
        width: 100%;
        display: inline-block;
        height: 0;
      }
    }

    .info-box {
      /* border: 1px solid green; */
      width: 50%;

      > div {
        height: 32px;
        font-size: 14px;
        font-weight: 500;
        color: black;
        text-align: start;
        line-height: 32px;
      }
    }
  }
}

#el-drawer__title {
  padding-left: 10px;
  margin-bottom: 12px;
  padding-top: 6px;
  color: black;
  font-size: 20px;
  font-weight: bold;
}

.el-collapse-item__header {
  border-style: dashed !important;
}

.el-drawer__body {
  /* border: 1px solid red; */
  overflow-y: scroll;
}

.el-drawer__body::-webkit-scrollbar {
  width: 4px;
  display: none;
}
.el-drawer__body::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}
.el-drawer__body::-webkit-scrollbar-track {
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
  .drawer-title {
    font-size: 16px;
  }
  .title {
    /* border-top: 2px solid #f0f0f0; */
    height: 36px;
    font-size: 16px;
    font-weight: bold;
    line-height: 36px;
    padding-left: 10px;
    margin-top: 10px;

    .el-date-picker {
      width: 40px;
    }

    .day-choose {
      width: 100px;
      /* border: 1px solid red; */
      margin-left: 43%;

      .el-input__inner {
        width: 100px;
        padding-right: 0;
      }
    }

    > i {
      margin-right: 5px;
      /* border: 1px solid red; */
    }
  }
  .table-pro-info-box {
    /* border-bottom: 1px solid #f0f0f0; */

    .info-box {
      border-top: 1px solid #f0f0f0;
      padding-top: 5px;
      margin-bottom: 5px;

      .pro-name {
        padding-left: 20px;
        font-size: 14px;

        > span {
          padding-left: 0px;
        }
      }

      .fun-space {
        /* border: 1px solid red; */
        display: flex;
        margin-top: 4px;

        .space-title {
          /* border: 1px solid green; */
          /* padding-top: 8px; */
          padding-left: 20px;
          font-size: 14px;
          height: 18px;
          width: 21%;
          line-height: 20px;
        }

        .fun-box {
          /* border: 1px solid blue; */
          font-size: 14px;
          height: 18px;
          line-height: 20px;
          width: 75%;
        }

        .el-tag {
          width: 30%;
          height: 22px;
          font-size: 14px;
          line-height: 20px;
          text-align: center;
          margin: 5px 5px;
        }
      }
    }
    .title-box {
      border-top: 1px solid #f0f0f0;
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
    }
  }

  .table-contract-info-box {
    /* height: 110px; */
    .contract-box {
      /* border: 1px solid red; */
      /* padding-left: 20px; */
      display: flex;

      .contract-info {
        /* border: 1px solid red; */
        border-top: 1px solid #f0f0f0;
        height: 20px;
        line-height: 20px;
        padding-top: 5px;
        margin-bottom: 5px;
        padding-left: 20px;
        > div {
          /* border: 1px solid green; */
          width: 90%;
          font-size: 14px;
          margin-bottom: 4px;
        }
      }

      .title-box {
        width: 22%;

        > div {
          height: 32px;
          font-size: 14px;

          text-align: justify;
          line-height: 32px;
        }

        > div:after {
          content: "";
          width: 100%;
          display: inline-block;
          height: 0;
        }
      }

      .info-box {
        /* border: 1px solid green; */
        border-top: 1px solid #f0f0f0;
        width: 59%;

        > div {
          height: 32px;
          font-size: 14px;
          font-weight: 500;
          color: black;
          text-align: start;
          line-height: 32px;
        }
      }
    }

    .info-box {
      width: 59%;

      > div {
        height: 32px;
        font-size: 14px;
        font-weight: 500;
        color: black;
        text-align: start;
        line-height: 32px;
      }
    }
  }

  .table-team-info-box {
    /* border: 1px solid red; */

    .team-box {
      border-top: 1px solid #f0f0f0;
      padding-left: 20px;
      display: flex;

      .title-box {
        width: 22%;

        > div {
          height: 20px;
          font-size: 14px;
          text-align: justify;
          line-height: 32px;
        }

        > div:after {
          content: "";
          width: 100%;
          display: inline-block;
          height: 0;
        }
      }

      .info-box {
        width: 74%;

        > div {
          height: 20px;
          font-size: 14px;
          font-weight: 500;
          color: black;
          text-align: start;
          line-height: 32px;
        }
      }
      .info-box:last-child {
        margin-bottom: 15px;
      }
    }
  }

  .table-milestone-info-box {
    .milestone-box {
      /* border: 1px solid red; */
      width: 90%;
      padding-left: 20px;
      display: flex;

      .el-collapse-item {
        width: 400px;

        .collapse-box {
          display: flex;
          margin-left: 25px;
        }
      }

      .title-box {
        /* border: 1px solid blue; */
        width: 25%;

        > div {
          /* border: 1px solid green; */
          height: 32px;
          font-size: 14px;
          text-align: justify;
          line-height: 32px;
        }

        > div:after {
          content: "";
          width: 100%;
          display: inline-block;
          height: 0;
        }
      }

      .info-box {
        /* border: 1px solid green; */
        width: 50%;

        > div {
          height: 32px;
          font-size: 14px;
          font-weight: 500;
          color: black;
          text-align: start;
          line-height: 32px;
        }
      }
    }
  }

  #el-drawer__title {
    padding-left: 10px;
    margin-bottom: 12px;
    padding-top: 6px;
    color: black;
    font-size: 20px;
    font-weight: bold;
  }

  .el-collapse-item__header {
    border-style: dashed !important;
  }

  .el-drawer__body {
    /* border: 1px solid red; */
    overflow-y: scroll;
  }

  .el-drawer__body::-webkit-scrollbar {
    width: 4px;
    display: none;
  }
  .el-drawer__body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
  }
  .el-drawer__body::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
  }
}
</style>